<template>
  <div class="content">
    <h1>精密加工部设备展示平台</h1>
    <div class="pageOne">
      <div class="topBox">
        <el-checkbox-group
          v-model="checkList"
          @change="changeChecked"
          size="medium "
        >
          <el-checkbox class="checked1" label="1"
            >运行({{ numberzc }})</el-checkbox
          >
          <el-checkbox class="checked2" label="0"
            >待机({{ numberdy }})</el-checkbox
          >
          <el-checkbox class="checked3" label="2"
            >故障({{ numbertj }})</el-checkbox
          >
          <el-checkbox class="checked4" label="3"
            >停机({{ numberlx }})</el-checkbox
          >
        </el-checkbox-group>

        <div class="rightbox">
          <span>车间：</span>
          <el-select
            placeholder="请选择车间"
            v-model="queryParams.workshopId"
            @change="workshopChange"
          >
            <el-option
              v-for="item in workshopList"
              :key="item.workshopId"
              :label="'[' + item.workshopCode + ']' + ' ' + item.workshopName"
              :value="item.workshopId"
            >
            </el-option>
            <el-option label="综合数据看板" value="0"></el-option>
          </el-select>

          <span style="margin: 5px 0 0 40px">{{ nowDate }}</span>
        </div>
      </div>
      <el-scrollbar style="height: 88%">
        <div class="contentBox">
          <div
            class="itemBox"
            v-for="item in dataList"
            :key="item.id"
            v-show="item.isShow"
            @click="openDetails(item)"
          >
            <div
              class="topbox"
              :style="{
                border: item.borderColor,
                boxShadow: item.boxShadowColor,
              }"
            >
              <span>{{ item.emCode }}</span>
            </div>
            <div
              class="content1"
              :style="{
                border: item.borderColor,
                boxShadow: item.boxShadowColor,
              }"
            >
              <div class="bot">
                <div
                  class="itemleft"
                  v-for="(v, i) in item.classMapNumber"
                  :key="i"
                >
                  <span>{{ v.className }}</span>
                  <span>{{ v.nickName }}</span>
                  <span>{{ v.classCount }}</span>
                  <span class="spantext">
                    <p style="font-size: 14px">(稼动率)</p>
                    <p>{{ v.classCount }}%</p>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div class="mask" v-show="detailsVivsible">
      <img
        class="img"
        src="../../assets/img/cancel.png"
        @click="detailsVivsible = false"
      />
      <sysmDetails
        class="details"
        :key="updateKey"
        :itemDetials="itemDetials"
        :itemMsg4="itemMsg4"
      ></sysmDetails>
    </div>
  </div>
</template>

<script>
import {
  getDatailsFake,
  selectWorkShop,
  getItemDatails,
} from "@/api/workShop1";
import sysmDetails from "../components/fakeCompt/workShop1Fake/sysmDetails.vue";
export default {
  name: "workShop1Fake",
  components: { sysmDetails },
  // 添加其他选项
  data() {
    return {
      nowDate: "",
      dataList: [
        //12x7 = 84条
      ],
      // 总条数
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 2,
        workshopId: 17,
      },
      numberzc: 0,
      numberdy: 0,
      numbertj: 0,
      numberlx: 0,
      workshopList: [],
      timer: null,
      borderColor: "3px solid #11ff9d",
      boxShadowColor: "#11ff9d 0px 0px 2px 1px",
      checkList: ["0", "1", "2", "3"],
      detailsVivsible: false,
      updateKey: 1,
      itemDetials: {},
      itemMsg4: [],
    };
  },
  created() {
    this.updateTime();
    this.getWorkShop();
    this.workshopChange("17");
  },
  watch: {},
  beforeDestroy() {
    clearTimeout(this.timer);
  },
  methods: {
    //时间走动
    updateTime() {
      const today = new Date();
      let y = today.getFullYear();
      let mt = today.getMonth() + 1; // 月份是从0开始的
      let d = today.getDate();
      let h = today.getHours();
      let m = today.getMinutes();
      let s = today.getSeconds();
      mt = mt < 10 ? "0" + mt : mt;
      d = d < 10 ? "0" + d : d;
      h = h < 10 ? "0" + h : h;
      m = m < 10 ? "0" + m : m;
      s = s < 10 ? "0" + s : s;
      const timeString = y + "/" + mt + "/" + d + " " + h + ":" + m + ":" + s;
      // 显示时间到页面上的元素
      this.nowDate = timeString;
      // 每秒更新时间
      setTimeout(this.updateTime, 1000);
    },
    openDetails(value) {
      this.itemMsg4 = value.classMapNumber || [];
      this.detailsVivsible = true;
      getItemDatails(value.id).then((res) => {
        this.$nextTick(() => {
          this.updateKey += 1;
          this.itemDetials = res.data;
        });
      });
    },
    //单选框选择
    changeChecked(val) {
      this.dataList.map((item, index) => {
        return this.$set(
          this.dataList[index],
          "isShow",
          val.includes(item.state.toString())
        );
      });
    },
    //车间
    getWorkShop() {
      selectWorkShop().then((res) => {
        this.workshopList = res.rows;
      });
    },
    //获取产线
    workshopChange(value) {
      if (value === "0") {
        this.$router.push({ path: "/homeFake" });
      }
      sessionStorage.setItem("value", value);
      this.numberzc = 0;
      this.numberdy = 0;
      this.numbertj = 0;
      this.numberlx = 0;
      getDatailsFake(value).then((res) => {
        // this.dataList = res.data;
        this.dataList = res.data.sort((pre, cur) => pre.id - cur.id);
        res.data.map((item) => {
          item["isShow"] = true;
          if (item.state === 1) {
            this.numberzc += 1;
            item["borderColor"] = "1px solid #11ff9d";
            item["boxShadowColor"] = "#11ff9d 0px 0px 2px 1px";
          } else if (item.state === 0) {
            this.numberdy += 1;
            item["borderColor"] = "1px solid #fac858";
            item["boxShadowColor"] = "#fac858 0px 0px 2px 1px";
          } else if (item.state === 2) {
            this.numbertj += 1;
            item["borderColor"] = "1px solid #ed6464";
            item["boxShadowColor"] = "#ed6464 0px 0px 2px 1px";
          } else if (item.state === 3) {
            this.numberlx += 1;
            item["borderColor"] = "1px solid #9d9fa2";
            item["boxShadowColor"] = "#9d9fa2 0px 0px 2px 1px";
          }
          return item;
        });
      });
      this.timer = setTimeout(() => {
        this.workshopChange(sessionStorage.getItem("value"));
      }, 60000);
    },
  },
};
</script>

<style scoped>
.content {
  display: flex;
  justify-content: center;
  color: #01a7f0;
  text-align: center;
}
html,
body {
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 3840px) {
  .content {
    font-size: 40px;
  }
}
</style>
<style lang="scss" scoped>
h1 {
  position: absolute;
  color: #9be5fb;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 40px;
  text-align: center;
  z-index: 9999;
  letter-spacing: 5px;
  margin-left: 20px;
}
::v-deep.el-scrollbar__wrap {
  overflow-x: hidden; //将横向滚动条隐藏
}
::v-deep .el-scrollbar__thumb {
  //可设置滚动条颜色
  background: #9be5fb;
  opacity: 0.5;
}

.pageOne {
  //   width: 3840px;
  //   height: 2160px;
  width: 100%;
  height: 100vh;
  background: url("~@/assets/img/back1.png") no-repeat center center fixed;
  background-size: 100% 100%;
  overflow: hidden;
  z-index: 999;
  .topBox {
    width: 94%;
    height: 60px;
    margin: 40px 0 0 3%;
    display: flex;
    justify-content: space-between;
    .rightbox {
      width: auto;
      display: flex;
      align-items: flex-start;
      span {
        font-size: 22px;
        color: #8993f2;
      }
    }
  }
  .contentBox {
    color: #a1b9f5;
    width: 96%;
    margin-left: 2.8%;
    margin-top: -20px;
    // height: 1970px;
    display: flex;
    flex-wrap: wrap;
    .itemBox {
      width: 236px;
      height: 218px;
      margin: 22px 24px 0 0;
      border: 1px solid rgb(244, 242, 242, 0);
      .topbox {
        background-color: #14314d;
      }
      .topbox {
        position: relative;
        width: 80px;
        height: 38px;
        line-height: 38px;
        margin-left: 81px;
        border-radius: 5px;
        z-index: 9999;
        span {
          font-size: 28px;
          font-weight: 700;
        }
      }

      .content1 {
        z-index: 9998;
        width: 236px;
        height: 208px;
        margin-top: -20px;
        padding: 18px 0 0;
        text-align: left;
        line-height: 60px;
        color: #8993f2;
        border-radius: 4px;
        span {
          font-size: 16px;
          height: 35px;
          width: 232px;
          line-height: 40px;
          display: block;
          text-align: center;
          border-bottom: 2px solid #323e92;
        }
      }
      .bot {
        width: 235px;
        height: 175px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        // margin-top: 5px;
        .itemleft {
          width: 50%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        span {
          height: 42px;
          width: 115px;
          line-height: 42px;
          border-right: 1px solid #323e92;
        }
        .spantext {
          display: block;
          height: 80px;
          // border-right: none;
          border-bottom: none;
          p {
            line-height: 30px;
            margin: 0;
          }
        }
      }
    }
  }
}
::v-deep .el-checkbox {
  .el-checkbox__label {
    color: #8993f2 !important;
    font-size: 22px !important;
    margin-top: 8px;
  }
  .el-checkbox__input {
    &.is-checked {
      .el-checkbox__inner {
        background-color: #fac858;
        border-color: #fac858;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        &::after {
          width: 10px;
          height: 10px;
          left: 5px;
          top: 3px;
        }
      }
    }
  }
}
::v-deep .checked1 {
  .el-checkbox__input {
    margin-bottom: px(5);
    &.is-checked {
      .el-checkbox__inner {
        background-color: #11ff9d;
        border-color: #11ff9d;
      }
    }
  }
}
::v-deep .checked3 {
  .el-checkbox__input {
    margin-bottom: px(5);
    &.is-checked {
      .el-checkbox__inner {
        background-color: #ed6464;
        border-color: #ed6464;
      }
    }
  }
}
::v-deep .checked4 {
  .el-checkbox__input {
    margin-bottom: px(5);
    &.is-checked {
      .el-checkbox__inner {
        background-color: #9d9fa2;
        border-color: #9d9fa2;
      }
    }
  }
}

//下拉框
::v-deep .el-input__inner {
  background-color: transparent !important;
  color: #8993f2;
  height: 35px !important;
  font-size: 20px !important;
}
/**修改边框和字体颜色 */
::v-deep .el-select {
  position: relative;
  width: 200px;
  .el-input {
    input {
      font-size: 16px !important;
      height: 35px !important;
      border-color: rgba(44, 137, 229, 0.5);
      color: #8993f2 !important;
    }
  }
}
/**修改下拉图标颜色 */
::v-deep .el-input__suffix {
  .el-input__suffix-inner {
    .el-icon-arrow-up:before {
      color: #8993f2;
      // padding-left: 0.11rem;
    }
  }
}
// .pagination {
//   width: 100vw;
//   position: absolute;
//   bottom: 4%;
//   right: 0;
//   left: 0;
//   margin: auto 0;
//   z-index: 9999;
//   display: flex;
//   align-items: center;
//   justify-content: center;
// }
.mask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  .details {
    margin-left: 160px;
    margin-top: 80px;
    z-index: 10001;
  }
  .img {
    width: 100px;
    height: 100px;
    position: absolute;
    margin-left: 740px;
    margin-top: 60px;
    z-index: 10002;
  }
}
</style>
